
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Accessible TabView</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

	/*	The following style rules necessary to override style rules in the 
		YUI CSS file. */

	#example ul,
	#example li {
		list-style: none;
		list-style: none;		
	}
	
	#example em {
		font-style: normal;
	}

	#example .yui3-tabpanel {

		/*	Use the "zoom" property to set the the hasLayout property to true.
			This ensures that the background color of the tab's panel will 
			be rendered correctly when the example is running in the 
			example chrome.
		*/

		_zoom: 1;

	}

	#example .yui3-tabpanel a {
		text-decoration: underline;
		color: blue;
	}
	
	#example h3 {
		color: #000;
		font-size: 100%;
		font-weight: bold;
	}

	#example .yui3-tabview {
		margin: 0 .25em;
	}
	

	/*	Hide the instructional text used to label the tabview offscreen.
	 	This ensures it is still available to users of screen readers, but is 
		not visible to sighted users.	*/

	#tabview-heading em {
		position: absolute;
		left: -999em;
	}


	/*	Hide the list while it is being transformed into a tabview.	*/

	.yui3-js-enabled .yui3-tabview-loading {
		display: none;
	}

</style>
<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Accessible TabView</h1>

<div class="exampleIntro">
	<p>
This example illustrates how to create an accessible tabview widget using the 
Focus Manager Node Plugin, 
<a href="../../api/YUI.html#event_delegate">Event's delegation support</a>, and 
Node's support for the 
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<h3 id="tabview-heading">Today's News</h3>
<div id="tabview-1" class="yui3-tabview-loading">
    <ul>
        <li class="yui3-tab yui3-tab-selected"><a href="#top-stories"><em>Top Stories</em></a></li>
        <li class="yui3-tab"><a href="#world-news"><em>World</em></a></li>
        <li class="yui3-tab"><a href="#entertainment-news"><em>Entertainment</em></a></li>
        <li class="yui3-tab"><a href="#sports-news"><em>Sports</em></a></li>
        <li class="yui3-tab"><a href="#technology-news"><em>Technology</em></a></li>		
    </ul>            
    <div>
        <div class="yui3-tabpanel yui3-tabpanel-selected" id="top-stories">
			<h3>Top Stories</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_re_us/us_congresswoman_shot"><q>Officer stopped suspect on day of Ariz. shooting 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_go_pr_wh/us_congresswoman_shot_obama"><q>Obama to be nation's consoler at memorial service 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_bi_ge/us_winter_weather"><q>Winter storm buries southern New England 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_re_af/af_tunisia_riots"><q>Riots reach Tunisia's capital, curfew imposed 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_re_la_am_ca/lt_brazil_flood_deaths"><q>Torrential rain, mudslides in Brazil kill 140 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_re_us/us_congresswoman_shot_palin"><q>Palin: Journalists incite hatred after AZ shooting 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_re_us/us_us_afghanistan"><q>US military chief: Enemy in Afghanistan is losing 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_bi_ge/us_illinois_taxes"><q>Gov. Quinn promises to quickly sign Ill. tax hike 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_en_mu/us_people_aretha_franklin"><q>Aretha Franklin says her health is 'superb' 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20110112/ap_on_re_eu/eu_germany_animal_magnetism"><q>Latest German animal star a cross-eyed opossum 
    (AP)
</q></a>
				</li></ul>	        	
        </div>
        <div class="yui3-tabpanel" id="world-news">
			<h3>World News</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/nm/20110112/wl_nm/us_lebanon_hariri_resignation"><q>Hezbollah and allies resign, toppling Lebanon government 
    (Reuters)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/nm/20110112/wl_nm/us_haiti_quake_anniversary"><q>Haitians remember 2010 quake, seek way out of 'hell' 
    (Reuters)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/nm/20110112/wl_nm/us_brazil_rains"><q>At least 127 dead as rains pummel Brazil regions 
    (Reuters)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/nm/20110112/wl_nm/us_pakistan_bombing"><q>Suicide bomber kills 17 police and soldiers in Pakistan 
    (Reuters)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/nm/20110112/wl_nm/us_palestinians_israel_gaza"><q>Gaza militants say to halt rocket fire at Israel 
    (Reuters)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/time/20110112/wl_time/08599204200300"><q>Lebanon Government Collapse: Hizballah Exits Cabinet 
    (Time.com)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20110112/ap_on_bi_st_ma_re/us_wall_street"><q>Stocks head higher as worries about Europe ease 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20110112/ap_on_re_mi_ea/lebanon_hariri_tribunal"><q>Hezbollah and its allies topple Lebanon government 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20110112/ap_on_re_la_am_ca/lt_brazil_flood_deaths"><q>Torrential rain, mudslides in Brazil kill 140 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/world/*http://news.yahoo.com/s/ap/20110112/ap_on_re_af/af_nigeria_election"><q>Religion and region at play in Nigerian election 
    (AP)
</q></a>
				</li></ul>        </div>
        <div class="yui3-tabpanel" id="entertainment-news">
			<h3>Entertainment News</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20110112/ap_en_mo/us_people_eddie_furlong"><q>`Green Hornet' actor Eddie Furlong arrested 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20110112/ap_en_mo/us_film_dga_documentary_nominations"><q>Oscar winners Gibney, Guggenheim earn DGA noms 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://news.yahoo.com/s/ap/20110112/ap_en_ot/us_theater_god_of_carnage"><q>Original cast of 'God of Carnage' are reuniting 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://us.rd.yahoo.com/dailynews/external/omg_rss/rss_omg_en/http___omg_yahoo_com_news53913/39609831/*http://omg.yahoo.com/news/scream-mary-murphy-heads-back-to-so-you-think-you-can-dance/53913"><q>SCREAM! Mary Murphy Heads Back To 'So You Think You Can Dance'! 
    (omg!)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://us.rd.yahoo.com/dailynews/external/omg_rss/rss_omg_en/http___omg_yahoo_com_news53957/39625590/*http://omg.yahoo.com/news/kevin-james-wife-expecting-baby-no-3/53957"><q>Kevin James, Wife Expecting Baby No. 3 
    (omg!)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://us.rd.yahoo.com/dailynews/external/omg_rss/rss_omg_en/http___omg_yahoo_com_news53955/39625591/*http://omg.yahoo.com/news/lady-gaga-britney-spears-who-is-or-isn-t-performing-at-the-grammy-awards/53955"><q>Lady Gaga? Britney Spears? Who Is (Or Isn't) Performing At The Grammy Awards? 
    (omg!)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://us.rd.yahoo.com/dailynews/external/omg_rss/rss_omg_en/http___omg_yahoo_com_news53956/39625592/*http://omg.yahoo.com/news/roll-call-kelly-clarkson-names-her-pet-goat-billy-joel/53956"><q>ROLL CALL: Kelly Clarkson Names Her Pet Goat Billy Joel 
    (omg!)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://us.rd.yahoo.com/dailynews/external/omg_rss/rss_omg_en/http___omg_yahoo_com_news53954/39625413/*http://omg.yahoo.com/news/big-bang-theory-renewed-for-three-more-years/53954"><q>Big Bang Theory Renewed for Three More Years 
    (omg!)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://us.rd.yahoo.com/dailynews/external/omg_rss/rss_omg_en/http___omg_yahoo_com_videos12842/39625171/*http://omg.yahoo.com/videos/national-board-of-review-attracts-oscar-hopefuls/12842"><q>National Board of Review attracts Oscar hopefuls 
    (omg!)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/entertainment/*http://us.rd.yahoo.com/dailynews/external/omg_rss/rss_omg_en/http___omg_yahoo_com_news53946/39623686/*http://omg.yahoo.com/news/david-nelson-of-ozzie-and-harriet-tv-family-dies/53946"><q>David Nelson of "Ozzie and Harriet" TV family dies 
    (omg!)
</q></a>
				</li></ul>	        	
        </div>
        <div class="yui3-tabpanel" id="sports-news">
			<h3>Sports News</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20110112/ap_on_sp_co_ne/fbc_michigan_hoke"><q>Michigan gets its man, hiring Brady Hoke 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20110112/ap_on_sp_fo_ne/fbn_broncos_search"><q>Fox finally makes it to Denver for interview 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20110112/ap_on_sp_ot/sof_us_team_defections"><q>Softball stars not playing for US team 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/afp/20110112/wl_asia_afp/fblasia2011gpaqatchn"><q>Qatar restore pride with China victory 
    (AFP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20110112/ap_on_sp_co_ne/fbc_lsu_miles"><q>Les Miles has a new 7-year contract at LSU 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20110112/ap_on_sp_ba_ne/bbn_hoffman_retires"><q>Hoffman retires after 601 saves in 18 seasons 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20110112/ap_on_sp_bk_ga_su/bkn_cavaliers_lakers"><q>Lakers crush Cavs 112-57 in best defensive effort 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20110112/ap_on_sp_fo_ne/fbn_panthers_rivera"><q>Panthers hire Chargers' Rivera as head coach 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/ap/20110112/ap_on_sp_ba_ne/bbn_cubs_hill"><q>Koyie Hill, Cubs agree to $850,000 contract 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/sports/*http://news.yahoo.com/s/nm/20110112/sp_nm/us_nba_cavaliers"><q>Cavaliers humiliated by 55-point loss to Lakers 
    (Reuters)
</q></a>
				</li></ul>	        	
        </div>
        <div class="yui3-tabpanel" id="technology-news">
			<h3>Technology News</h3>
			<ul>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20110112/ap_on_sp_ot/us_tec_digital_life_tech_test_golf_gadgets"><q>Review: Technology helps golfers fine-tune game 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20110112/ap_on_hi_te/us_tec_verizon_iphone"><q>Verizon to start selling iPhone on Feb. 10 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/20110111/ap_on_hi_te/us_tec_verizon_iphone_winners_and_losers"><q>Verizon big winner from having iPhone? Not so fast 
    (AP)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/yblog_technews/20110112/tc_yblog_technews/ces-2011-end-of-show-scrapbook"><q>CES 2011: End-of-show scrapbook 
    (Ben Patterson)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/yblog_technews/20110112/tc_yblog_technews/verizon-iphone-announcement-gets-daily-show-treatment"><q>Verizon iPhone announcement gets ‘Daily Show’ treatment 
    (Ben Patterson)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/nf/20110112/bs_nf/76870"><q>CES Tablets Jockey for Traction Against Apple's iPad 
    (NewsFactor)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/pcworld/20110112/tc_pcworld/doamericanslovetheirelectronicsnielsensurveygivesusaglimpse"><q>Do Americans Love Their Electronics? Nielsen Survey Gives Us a Glimpse 
    (PC World)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/mashable/20110112/tc_mashable/treadmill_allows_you_to_take_a_virtual_run_anywhere_on_google_earth_video"><q>Treadmill Allows You to Take a Virtual Run Anywhere on Google Earth [VIDEO] 
    (Mashable)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/digitaltrends/20110112/tc_digitaltrends/exrimemployeesaystheplaybookfaceschallenges"><q>Ex-RIM employee says the PlayBook faces challenges 
    (Digital Trends)
</q></a>
				</li>				<li>
				    <a href="http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/nm/20110112/wr_nm/us_ibm_samsung"><q>IBM, Samsung to jointly develop chip technology 
    (Reuters)
</q></a>
				</li></ul>	        	
        </div>			
    </div>
</div>

<script type="text/javascript">

	YUI({ 

			base: "../../build/",
			modules: {
				"tabviewcss": {
					type: "css",
					fullpath: "assets/tabview.css"
				},
				"tabviewjs": {
					type: "js",
					fullpath: "assets/tabview.js",
					requires: ["node-focusmanager", "tabviewcss"]
				}

			},
			timeout: 10000

    }).use("tabviewjs");

</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
